<template>
  <div class="enter_voice">
    <div :class="['voice_time', { shows: recordState }]">
      <div class="lines_box">
        <div class="lines first" :class="[{ active: duration.toFixed(0) % 4 > 2 }]"></div>
        <div class="lines second" :class="[{ active: duration.toFixed(0) % 4 > 1 }]"></div>
        <div class="lines third" :class="[{ active: duration.toFixed(0) % 4 > 0 }]"></div>
      </div>
      <div class="time">{{ duration.toFixed(2) }}″</div>
      <div class="lines_box">
        <div class="lines third" :class="[{ active: duration.toFixed(0) % 4 > 0 }]"></div>
        <div class="lines second" :class="[{ active: duration.toFixed(0) % 4 > 1 }]"></div>
        <div class="lines first" :class="[{ active: duration.toFixed(0) % 4 > 2 }]"></div>
      </div>
    </div>
    <div :class="['voice_content', { record_state: recordState }]" @click="onClick">
      <img src="../assets/images/common/luyin2.png" class="voice_icon" v-if="recordState" />
      <img src="../assets/images/common/luyin.png" class="voice_icon" v-else />
    </div>
    <div class="voice_tip">
      {{ recordState ? '结束录音' : '点击录音' }}
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'VoiceBtnFlutter',
  components: {},
  props: {},
  data() {
    return {
      recordState: false, //录音状态
      timeNum: 60,
      resultText: '',
      duration: 0,
      setIntDuration: null,
    }
  },
  computed: {
    ...mapState(['isRecordIng']),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(['setIsRecordIng']),
    onClick() {
      if (this.isRecordIng && !this.recordState) {
        this.$toast.fail('请先关闭其他录音')
        return false
      }
      if (!this.recordState) {
        // 开始录音
        this.startRecord()
      } else {
        // 结束录音
        this.recordState = false
        this.setIsRecordIng(false)
      }
    },
    startRecord() {
      const that = this
      that.duration = 0
      window.startRecorderSuccess = that.startRecorderSuccess
      window.endRecorder = that.endRecorder
      window.flutter_inappwebview.callHandler('onRecord', '')
      that.setIsRecordIng(true)
    },
    endRecorder(json) {
      this.recordState = false
      this.setIsRecordIng(false)
      console.log('json :>> ', json)
      if (json.status !== 0) {
        if (json.status === 1) {
          this.$toast.fail('录音取消')
        } else {
          this.$toast.fail('录音失败')
        }
      } else {
        this.$toast.loading({
          message: '录音保存中',
          forbidClick: true,
        })
        let resData = {}
        resData.entryCont = json.trans
        this.$emit('recordend', JSON.stringify(resData))
        this.$toast.clear()
      }
    },
    handleVisiable(e) {
      // 用户离开了当前页面
      if (e.target.visibilityState === 'hidden') {
        console.log('页面不可见')
      }
      // 用户打开或回到页面
      if (e.target.visibilityState === 'visible') {
        document.title = '页面可见'
        console.log('页面可见')
      }
    },
    startRecorderSuccess() {
      console.log('ok :>> ')
      this.recordState = true
    },
  },
  beforeDestroy() {
    this.recordState = false
    this.setIsRecordIng(false)
  },
}
</script>

<style lang="scss" scoped>
.enter_voice {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin: 2px;
  padding: 5px 0 10px;
  .voice_time {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12px;
    opacity: 0;

    &.show {
      opacity: 1;
    }
    .time {
      font-size: 12px;
      color: #666666;
      margin: 0 3px 0 5px;
    }

    .lines_box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .lines {
        background-color: #e6e6e6;
        width: 2px;
        margin-left: 3px;
        border-radius: 1px;

        &.active {
          background-color: #d80a06;
        }

        &.first {
          height: 50%;
        }

        &.second {
          height: 80%;
        }

        &.third {
          height: 100%;
        }
      }
    }
  }

  .voice_content {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    &.record_state {
      background-color: #f9f9f9;
    }

    .voice_icon {
      width: 29px;
    }
  }

  .voice_tip {
    font-size: 13px;
    color: #333333;
    margin-top: 4px;
    padding-top: 2px;
  }
}
</style>
